import React from "react";

const TextDemo: React.FC = () => {
  return (
    <div className="space-y-8">
      <h1 className="text-4xl font-bold mb-6">Tailwind CSS Text Styles Demo</h1>

      {/* Text Sizes */}
      <section>
        <h2 className="text-2xl font-semibold mb-4">Text Sizes</h2>
        <div className="space-y-2"> {/** div中的每个item y间距 2*4 = 8px */}
          <p className="text-xs">This is text-xs (extra small)</p>
          <p className="text-sm">This is text-sm (small)</p>
          <p className="text-base">This is text-base (base size)</p>
          <p className="text-lg">This is text-lg (large)</p>
          <p className="text-xl">This is text-xl (extra large)</p>
          <p className="text-2xl">This is text-2xl (2x large)</p>
          <p className="text-3xl">This is text-3xl (3x large)</p>
          <p className="text-4xl">This is text-4xl (4x large)</p>
        </div>
      </section>

      {/* Text Colors */}
      <section>
        <h2 className="text-2xl font-semibold mb-4">Text Colors</h2>
        <div className="space-y-2">
          <p className="text-black">This is text-black</p>
          <p className="text-white bg-gray-800">
            This is text-white (on dark background)
          </p>
          <p className="text-gray-500">This is text-gray-500</p>
          <p className="text-red-500">This is text-red-500</p>
          <p className="text-blue-500">This is text-blue-500</p>
          <p className="text-green-500">This is text-green-500</p>
        </div>
      </section>

      {/* Text Alignment */}
      <section>
        <h2 className="text-2xl font-semibold mb-4">Text Alignment</h2>
        <div className="space-y-2">
          <p className="text-left">This is text-left</p>
          <p className="text-center">This is text-center</p>
          <p className="text-right">This is text-right</p>
          <p className="text-justify">
            This is text-justify. Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed
            erat molestie vehicula.
          </p>
        </div>
      </section>

      {/* Font Weights */}
      <section>
        <h2 className="text-2xl font-semibold mb-4">Font Weights</h2>
        <div className="space-y-2">
          <p className="font-thin">This is font-thin</p>
          <p className="font-extralight">This is font-extralight</p>
          <p className="font-light">This is font-light</p>
          <p className="font-normal">This is font-normal</p>
          <p className="font-medium">This is font-medium</p>
          <p className="font-semibold">This is font-semibold</p>
          <p className="font-bold">This is font-bold</p>
          <p className="font-extrabold">This is font-extrabold</p>
          <p className="font-black">This is font-black</p>
        </div>
      </section>

      {/* Text Decorations */}
      <section>
        <h2 className="text-2xl font-semibold mb-4">Text Decorations</h2>
        <div className="space-y-2">
          <p className="underline">This is underline</p>
          <p className="overline">This is overline</p>
          <p className="line-through">This is line-through</p>
          <p className="no-underline">This is no-underline</p>
        </div>
      </section>

      {/* Text Transform */}
      <section>
        <h2 className="text-2xl font-semibold mb-4">Text Transform</h2>
        <div className="space-y-2">
          <p className="uppercase">This is uppercase</p>
          <p className="lowercase">THIS IS LOWERCASE</p>
          <p className="capitalize">this is capitalize</p>
          <p className="normal-case">THIS IS NORMAL-CASE</p>
        </div>
      </section>
    </div>
  );
};

export default TextDemo;
